<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"> </script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"> </script>
</head>
<body>
    <div id="app">
        <el-row>
            <el-col :span="24" >
                <el-form :inline="true" class="demo-form-inline" >
                   
                    <el-form-item label="楼栋号:" >
                      <el-select placeholder="请选择楼栋" v-model="param.buildingId">
                        <el-option :label="b.numbers" :value="b.id" v-for="b in building"></el-option>
                      </el-select>
                    </el-form-item>

                    <el-form-item label="房号">
                        <el-input placeholder="房间号" v-model="param.numbers"></el-input>
                      </el-form-item>
                      <el-form-item label="面积">
                        <el-input placeholder="小" v-model="param.minArea"></el-input>
                      </el-form-item>
                      <el-form-item label="---">
                        <el-input placeholder="大" v-model="param.maxArea"></el-input>
                      </el-form-item>
<br>
                      <el-date-picker
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
                    </el-date-picker>

                    <el-form-item>
                      <el-button type="primary" @click="queryHouses">搜索</el-button>
                      <el-button type="primary">清空</el-button>
                    </el-form-item>
                  </el-form>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                <el-button type="primary" @click="addHouseBtn">添加</el-button>
                <el-button type="danger" @click="batchDelHouse">批量删除</el-button>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                <template>
                    <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">

                    <el-table-column
                      type="selection"
                      width="55">
                    </el-table-column>

                    <el-table-column
                      prop="buildingId"
                      label="楼号"
                      >  
                    </el-table-column>

                    <el-table-column
                      prop="storey"
                      label="楼层"
                      >
                    </el-table-column>

                    <el-table-column
                      prop="numbers"
                      label="房号"
                      >
                    </el-table-column>

                    <el-table-column
                    prop="area"
                    label="面积"
                    >
                    </el-table-column>

                    <el-table-column
                    prop="intoDate"
                    label="入住时间"
                    >
                  </el-table-column>

                  <el-table-column
                    prop="state"
                    label="状态"
                    >
                  </el-table-column>

                  <el-table-column
                    prop="ownerId"
                    label="业主ID"
                    >
                  </el-table-column>

                  <el-table-column
                    prop="realName"
                    label="业主用户名"
                    >
                  </el-table-column>

                  <el-table-column
                    prop="Operate"
                    label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="updataHouseBtn(scope.row.id)">修改</el-button>
                        <el-button size="mini" type="danger" @click="delHouseBtn(scope.row.id)">删除</el-button>
                      </template>
                  </el-table-column>
                  </el-table>
                  </template>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                <el-pagination
                background
                :page-sizes="[3, 5, 10, 30]"
                :page-size="pageSize"
                :current-page="pageNum"
                layout="prev, pager, next,total,sizes"
                :total="total"
                @next-click="nextPage"
                @prev-click="prevPage"
                @current-change="changePage"
                @size-change="changeSize">
                </el-pagination>
            </el-col>
        </el-row>

<!--        添加弹窗开始-->
        <el-dialog title="添加房屋" :visible.sync="addHouseForm">
            <el-form>
                <el-form-item>
                    <el-input v-show="false"></el-input>
                </el-form-item>
                <el-form-item label="选择楼栋" label-width="80px">
                    <el-select placeholder="请选择楼号"  v-model="addHouse.buildingId">
                        <el-option :label="b.numbers" :value="b.id"  v-for="b in building"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="楼层" label-width="80px">
                    <el-input v-model="addHouse.storey"></el-input>
                </el-form-item>
                <el-form-item label="选择房号" label-width="80px">
                    <el-select placeholder="请选择房号" v-model="addHouse.numbers">
                        <el-option :label="h.numbers" :value="h.id" v-for="h in houses"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="面积" label-width="80px">
                    <el-input v-model="addHouse.area"></el-input>
                </el-form-item>
                <el-form-item label="状态" label-width="80px">
                    <el-input v-model="addHouse.state"></el-input>
                </el-form-item>
                <el-form-item label="业主ID" label-width="80px">
                    <el-input v-model="addHouse.ownerId"></el-input>
                </el-form-item>
                <el-form-item label="业主用户名" label-width="80px">
                    <el-input v-model="addHouse.realName"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addHouseForm=false">取 消</el-button>
                <el-button type="primary" @click="saveAddHouse">确 定</el-button>
            </div>
        </el-dialog>
        <!--        添加弹窗结束-->

        <!--        修改弹窗开始-->
        <el-dialog title="修改房屋" :visible.sync="updateHouseForm">
            <el-form>
                <el-form-item>
                    <el-input v-show="false" v-model="selectUpdateHouse.id"></el-input>
                </el-form-item>
                <el-form-item label="选择楼栋" label-width="80px">
                    <el-select v-model="selectUpdateHouse.buildingId">
                        <el-option :label="b.numbers" :key="b.id" :value="b.id"  v-for="b in building"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="楼层" label-width="80px">
                    <el-input v-model="selectUpdateHouse.storey"></el-input>
                </el-form-item>
                <el-form-item label="选择房号" label-width="80px">
                    <el-select  v-model="selectUpdateHouse.numbers">
                        <el-option :label="h.numbers"  :value="h.id" v-for="h in houses"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="面积" label-width="80px">
                    <el-input v-model="selectUpdateHouse.area"></el-input>
                </el-form-item>
                <el-form-item label="状态" label-width="80px">
                    <el-input v-model="selectUpdateHouse.state"></el-input>
                </el-form-item>
                <el-form-item label="业主ID" label-width="80px">
                    <el-input v-model="selectUpdateHouse.ownerId"></el-input>
                </el-form-item>
                <el-form-item label="业主用户名" label-width="80px">
                    <el-input v-model="selectUpdateHouse.realName"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updateHouseForm=false">取 消</el-button>
                <el-button type="primary" @click="saveUpdateHouse">确 定</el-button>
            </div>
        </el-dialog>
        <!--        修改弹窗结束-->

    </div>

    <script>
        new Vue({
            el:'#app',
            data:{
                tableData: [
                    ],
                param:{},
                building:[],
                pageSize:5,
                pageNum:1,
                total:0,
                addHouseForm:false,
                updateHouseForm:false,
                addHouse:{},
                houses:[],
                selectIds:[],
                selectUpdateHouse:{}
            },
            methods:{
                queryBuilding(){
                    //查询楼栋下拉框
                    axios.get('/building/queryBuild').then(resp=>{
                        if(resp.data.code==200){
                            this.building=resp.data.data
                        }
                    })
                },
                queryHouse(){
                    //查询未入住的房屋信息
                    axios.get('/housing/queryHouse')
                        .then(resp=>{
                            if(resp.data.code==200){
                                this.houses=resp.data.data
                            }
                        })
                },
                queryHouses(){
                    //查询所有的信息
                    let pageData={}
                    pageData.pageSize=this.pageSize
                    pageData.pageNum=this.pageNum
                    pageData.param=this.param
                    axios.post('/housing/queryHouses',pageData).then(resp=>{
                        if(resp.data.code==200){
                            this.tableData=resp.data.data.list
                            this.total=resp.data.data.total
                        }
                    })

                },
                addHouseBtn(){
                    this.addHouseForm=true
                    this.queryHouse()
                },
                saveAddHouse(){
                    axios.post('/housing/addHouse',this.addHouse).then(resp=>{
                        if(resp.data.code==200){
                            this.addHouseForm=false
                            this.$message({
                                showClose: true,
                                message: '恭喜你，成功',
                                type: 'success'
                            });
                            this.queryHouses()
                        }
                    })
                },
                batchDelHouse(){
                    this.$confirm('是否继续删除?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        //发送删除请求
                        // 怎么得到选中的id数组
                        let ids=[]
                        this.selectIds.forEach(e=>{
                            ids.push(e.id)
                        })
                        axios.post('/housing/batchDelHouse',ids)
                            .then(resp=>{
                                if(resp.data.code==200){
                                    if(resp.data.data==false){
                                        this.$message({
                                            type: 'warning',
                                            message: '房间有人入住!'
                                        });
                                    }else{
                                        this.$message({
                                            type: 'success',
                                            message: '删除成功!'
                                        });
                                    }
                                    this.queryHousesInfo()
                                }
                            })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },
                handleSelectionChange(val){
                    this.selectIds=val
                },

                updataHouseBtn(id){
                    this.updateHouseForm=true
                    this.queryHouse()
                    axios.get('/housing/updataHouseBtn/'+id).then(resp=>{
                        if(resp.data.code==200){
                            this.selectUpdateHouse=resp.data.data
                        }
                    })
                },
                saveUpdateHouse(){
                    axios.post('/housing/saveUpdateHouse',this.selectUpdateHouse).then(resp=>{
                        if(resp.data.code==200){
                            this.updateHouseForm=false
                            this.$message({
                                showClose: true,
                                message: '恭喜你，更改成功',
                                type: 'success'
                            });
                        }
                        this.queryHouses()
                    })
                },

                delHouseBtn(id){
                    this.$confirm('是否继续删除?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.get('/housing/delHouse/'+id).then(resp=>{
                            if(resp.data.code==200){
                                if(resp.data.data==true){
                                    this.$message({
                                        type: 'success',
                                        message: '删除成功!'
                                    });
                                    this.updateHouseForm=false
                                    this.queryHousesInfo()
                                }else {
                                    this.$message({
                                        type: 'warning',
                                        message: '该房间已入住!'
                                    });
                                }

                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },
                //下一页方法
                nextPage(val){
                    //回调参数val,val等于当前页码
                    this.pageNum=val
                    this.queryHouses()
                },
                //上一页方法
                prevPage(val){
                    //回调参数val,val等于当前页码
                    this.pageNum=val
                    this.queryHouses()
                },
                changePage(val){
                    this.pageNum=val
                    this.queryHouses()
                },
                changeSize(val){
                    this.pageNum=1
                    this.pageSize=val
                    this.queryHousesInfo()
                },
                queryHousesInfo(){
                    this.pageNum=1
                    this.queryHouses()
                },
            },

            created(){

                this.queryBuilding()
                this.queryHousesInfo()
            }
        })
    </script>
</body>
</html>